<template>
  <div class="home">
    <!-- 
      顶部
     -->
    <HomeNavBar></HomeNavBar>

    <!-- 
      banner
     -->
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="">
    </div>

    <!-- 
      搜索区域
     -->
    <HomeSearchBox></HomeSearchBox>


    <!-- 
      分类categories
     -->
    <HomeCategories></HomeCategories>

    <!-- 
      搜索框显示的位置
      -->
    <HomeSearchBar v-if="isShowSearchBar"></HomeSearchBar>


    <!-- 
      瀑布流展示
      -->
    <HomeContent></HomeContent>


    <!-- 
      加载动画
     -->
    <Loading v-if="isLoading" @click="loadingClick"></Loading>
  </div>
</template>

<script>
export default {
  name: 'homeView'
}
</script>

<script setup>

import { ref, reactive, watch, computed } from 'vue'
import { storeToRefs } from 'pinia'

import HomeNavBar from '@/views/home/components/HomeNavBar.vue'
import HomeSearchBox from '@/views/home/components/HomeSearchBox.vue'
import HomeCategories from '@/views/home/components/HomeCategories.vue'
import HomeContent from '@/views/home/components/HomeContent.vue'
import HomeSearchBar from '@/views/home/components/HomeSearchBar.vue'
import Loading from '@/components/Loading/Loading.vue'

import useScroll from "@/hooks/useScroll.js"

import { useHomeStore } from '@/stores/home.js'
import { useMainStore } from '@/stores/main.js'


const homeStore = useHomeStore()
const { isBottom, scrollTop } = useScroll()

watch(isBottom, (newVal) => {
  if (newVal) {
    homeStore.fetchHouseList().then(res => {
      // 请求数据之后 标记为不是底部
      isBottom.value = false
    })
  }
})

// 搜索框显示的位置

// 方式1 监听器
// const isShowSearchBar = ref(false)
// watch(scrollTop, (newTop) => {
//   isShowSearchBar.value = newTop > 350
//   // console.log(newTop);
// })

// 方式2 计算属性
const isShowSearchBar = computed(() => {
  return scrollTop.value > 350
})


// 加载动画显示隐藏
const mainStore = useMainStore()
const { isLoading } = storeToRefs(mainStore)
console.log('loading', isLoading.value);

// 点击蒙版 退出加载动画
function loadingClick() {
  isLoading.value = false
}

// 监听到达底部，则加载动画

</script>

<style scoped lang="less">
.banner {
  img {
    width: 100%;
  }
}
</style>
